<template>
	<view class="animated fadeIn faster" style="min-height: 100vh;background-color: #f4f5f7;">
		
		<view class="p-3 bg-fff d-flex">
			<view class="d-flex-item d-flex d-flex-middle">
				<text class="iconfont icon-31fanhui1 color444 font32"></text>
			</view>
			<view class="d-flex-item d-flex d-flex-center d-flex-middle"><text class="font34">快捷登录</text></view>
			<view class="d-flex-item"></view>
		</view>
		<!-- <view class="colorhold px-3 pt-3 text-center">请选择聊天角色</view> -->
		<view class="p-3">
			<view class="d-flex d-flex-between d-flex-wrap mb-3">
				<view class="position-relative mb-2" :class="{'login-on':userIndex==index}" v-for="(item,index) in userList" :key="item.id" @click="setUser(index)">
					<image :src="item.avatar" class="login-img"></image>
					<view class="position-absolute d-flex d-flex-center d-flex-middle login-txt-bg">
						<text class="colorfff font26">{{item.nickName}}</text>
					</view>
				</view>
				
			</view>
		</view>
		<view class="position-fixed left-0 right-0 bottom-0 d-flex d-flex-center d-flex-middle rounded60 login-btn"  :class="{'login-btn-on':userIndex !=-1}">
			<text class="colorfff font32">立即登录</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userIndex:-1,
				userList:[
					{
						id:'1',
						nickName:'庄思丸',
						avatar:'https://www.168802.xyz/avatar/avatar01.png'
					},{
						id:'2',
						nickName:'庄思丸',
						avatar:'https://www.168802.xyz/avatar/avatar02.png'
					},{
						id:'3',
						nickName:'庄思丸',
						avatar:'https://www.168802.xyz/avatar/avatar03.png'
					},{
						id:'4',
						nickName:'庄思丸',
						avatar:'https://www.168802.xyz/avatar/avatar04.png'
					},{
						id:'5',
						nickName:'庄思丸',
						avatar:'https://www.168802.xyz/avatar/avatar05.png'
					},{
						id:'6',
						nickName:'庄思丸',
						avatar:'https://www.168802.xyz/avatar/avatar01.png'
					},{
						id:'7',
						nickName:'庄思丸',
						avatar:'https://www.168802.xyz/avatar/avatar02.png'
					},{
						id:'8',
						nickName:'庄思丸',
						avatar:'https://www.168802.xyz/avatar/avatar03.png'
					},{
						id:'9',
						nickName:'庄思丸',
						avatar:'https://www.168802.xyz/avatar/avatar04.png'
					}
				]
			}
		},
		methods: {
			setUser(index){
				this.userIndex = index
			}
		}
	}
</script>

<style scoped>
.login-img{
	width: 210rpx;
	height: 210rpx;
	border-radius: 22rpx;
	border-style: solid;
	border-width: 1px;
	border-color: transparent;
	overflow: hidden;
}
.login-on .login-img{
	border-color: #ff5722;
}
.login-txt-bg{
	height: 50rpx;
	left: 1px;
	right: 1px;
	bottom: 1px;
	background-color: rgba(0,0,0,.3);
	border-bottom-right-radius: 22rpx;
	border-bottom-left-radius: 22rpx;
	overflow: hidden;
}
.login-on .login-txt-bg{
	background-color: #ff5722;
}
.login-btn{
	height: 90rpx;
	background-color: rgba(225,87,34,.4);
}
.login-btn-on{
	background-color: rgba(225,87,34,1);
}
</style>
